<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">-->
    <meta name="format-detection" content="telephone=no" />
    <title>沟通中</title>
    <link rel="stylesheet" type="text/css" href="/static/newcj/css/themes.css?v=2017129">
    <link rel="stylesheet" type="text/css" href="/static/newcj/css/h5app.css">
    <link rel="stylesheet" type="text/css" href="/static/newcj/fonts/iconfont.css?v=2016070717">
    <link rel="stylesheet" type="text/css" href="/static/newcj/css/chat_list.css">
    <script src="/static//newcj/js/jquery.min.js"></script>
    <script src="/static/newcj/js/dist/flexible/flexible_css.debug.js"></script>
    <script src="/static/newcj/js/dist/flexible/flexible.debug.js"></script>

</head>
<body>
<div class='fui-page-group'>
    <div class="fui-statusbar"></div>
<div class='fui-page chat-page'>
	<div class="fui-header">
	    <div class="title">消息列表</div>
	    <div class="fui-header-right"></div>
	</div>

	<div class="fui-content navbar chat-fui-content" style="padding-bottom: 2rem;">
	</div>
</div>
</div>
</body>
<script>
    var API_URL = "http://tpblog.com/ChatApi/";
    var fromid ={$fromid};
    var ws = new WebSocket("ws://127.0.0.1:8282");

    ws.onmessage=function (e) {
        var message = eval('(' + e.data + ')');
        switch (message.type){
            case 'init':
                // 绑定id
                var bind = {
                    "type":"bind",
                    "fromid":fromid,
                };
                ws.send(JSON.stringify(bind));
                list();
                return;
            case 'text':
                $('.chat-fui-content').html("");
                list();
                return;
            case 'say_img':
                $('.chat-fui-content').html("");
                list();
                return;
        }
    }

    function list(){
        $.post(
            API_URL+"get_list",
            {id:fromid},
            function(res){
                for (const content of res) {
                    console.log(res)
                    $('.chat-fui-content').append('<div onclick=redi("'+content.chat_page+'") class="chat-list flex" >\n' +
                        '\t\t\t<div class="chat-img"  style="background-image: url('+content.avatar_url+')">\n' +
                        '\t\t\t\t<span class="badge" style="top: -0.1rem;left: 80%;">'+content.countNoread+'</span>\n' +
                        '\t\t\t</div>\n' +
                        '\t\t\t<div class="chat-info">\n' +
                        '\t\t\t\t<p class="chat-merch flex">\n' +
                        '\t\t\t\t\t<span class="title t-28">'+content.username+'</span>\n' +
                        '\t\t\t\t\t<span class="time">'+mydate(content.last_message.time)+'</span>\n' +
                        '\t\t\t\t</p>\n' +
                        '\t\t\t\t<p class="chat-text singleflow-ellipsis">'+content.last_message.content+'</p>\n' +
                        '\t\t\t</div>\n' +
                        '\t\t</div>');
                    if (content.countNoread == 0){
                        $('.badge').hide();
                    }
                }
            },'json'
        )
    }
    /**
     *根据时间戳格式化为日期形式
     */
    function mydate(nS){

        return new Date(parseInt(nS) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
    }

    function redi(url){
        window.location.href=url;
    }

</script>

</html>
